<!--
 * @Description: 机器人侧边
 * @Author: 阳婷
 * @Date: 2021-03-18 14:14:43
 * @LastEditTime: 2022-04-07 11:03:10
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox paneSide">
        <detail v-model:row-data="rowData" v-if="status==0"></detail>
        <el-tabs v-model="activeName" type="card" v-else>
            <el-tab-pane label="详情" name="first">
                <detail v-model:row-data="rowData"></detail>
            </el-tab-pane>
            <el-tab-pane label="账号配置" name="second">
                <div class="tabPane">
                    <table-header @click='Eventclick' :hideBtn="hideBtn">
                        <el-button type="text" icon="fa fa-plus" @click='addData'> 添加</el-button>
                    </table-header>
                    <el-table border style="width: 100%" :data="users" ref="tables"
                        @selection-change="handleSelectionChange" highlight-current-row>
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column prop="name" label="账号名"></el-table-column>
                        <!-- <el-table-column prop="remark" label="备注"></el-table-column> -->
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="页面权限" name="third">
                <div class="tabPane">
                    <!-- <el-checkbox-group v-model="select_menu">
                        <el-checkbox v-for="el in role_select" :label="el.key" :value="el.key" :key="el.key">
                            {{el.label}}</el-checkbox>
                    </el-checkbox-group> -->
                    <div class="roleBox" v-show="role_show">

                        <div class="roleTitle">
                            选择管理系统页面权限
                        </div>
                        <el-tree :data="permissions" show-checkbox :default-expanded-keys="[-1]" node-key="id"
                            :default-checked-keys.sync='checkedArr' ref='tree' :props="defaultProps"
                            @check-change="handleCheckChange">
                        </el-tree>
                    </div>
                </div>
                <div class="footerBtn">
                    <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>
        <Modal :showModal.sync="show" width="600px" title="账号列表" @cancel="cancel">
            <el-table border style="width: 100%" :data="memberList" @selection-change="handleSelectionChange2"
                ref="tables2" :row-key="getRowKeys">
                <el-table-column type="selection" :reserve-selection=true></el-table-column>
                 <el-table-column prop="name" label="用户名"></el-table-column>
                <el-table-column prop="username" label="账号"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                <!-- <el-table-column prop="customers" label="所属客户"></el-table-column> -->
            </el-table>
            <div class="pagination-container">
                <el-pagination background @current-change="handleCurrentChange" :page-size='perPage'
                    :current-page="current" :total="pagetotal" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </div>
            <div style="height:45px;">
                <el-button class="f-r" style="margin:10px;" size="small" type="primary" @click="onSure">保存</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        deepCopy,
        isEmptyObject,
        IsIndexOf
    } from "@/utils/index"
    import TableHeader from "./../../components/TableHeader/index.vue"
    import Modal from './../../components/Modal/index.vue'
    import detail from './detail.vue'
    export default {
        props: ["rowData", "tableData", "status", "activeType"],
        data() {
            return {
                show: false,
                users: [],
                permissions: [],
                role_select: [{
                    label: "管理系统权限",
                    key: 1
                }, {
                    label: "客户端权限",
                    key: 2
                }],
                select_menu: [],
                activeName: "first",
                hideBtn: {
                    Enable: false,
                    Disable: false,
                    delete: true
                },
                form: {
                    id: '',
                    name: '',
                    display_name: ''
                },
                defaultProps: {
                    children: "children",
                    label: "display_name"
                },
                checkedArr: [],
                chooseGroup: [],
                chooseGroup2: [],
                chooseGroup3: [],
                role_show: false,
                memberList: [],
                pagetotal: 0, //总条数
                page: 1, //当前页
                perPage: 15, //每页多少条
                current: 1,
            }
        },
        components: {
            TableHeader,
            detail,
            Modal
        },
        watch: {
            rowData() {
                this.clearData();
                if (!isEmptyObject(this.rowData)) {
                    this.form = deepCopy(this.rowData.role);
                    this.users = deepCopy(this.rowData.users)
                    this.permissions = deepCopy(this.rowData.permissions.list)
                    this.checkedArr = deepCopy(this.rowData.permissions.has)
                }
            },
            select_menu() {
                if (this.select_menu.find(this.findData) == 1) {
                    this.role_show = true
                } else {
                    this.role_show = false
                }
            }
        },
        mounted() {
            this.clearData();
            this.activeName = this.activeType
            this.select_menu = [1, 2]
            if (!isEmptyObject(this.rowData)) {
                this.form = deepCopy(this.rowData.role);
                this.users = deepCopy(this.rowData.users)
                this.permissions = deepCopy(this.rowData.permissions.list)
                this.checkedArr = deepCopy(this.rowData.permissions.has)
            }
        },
        methods: {
            getRowKeys(row) {
                return row.id
            },
            getMembers() {
                this.$ajax('get', '/api/admin/usersExRole', {
                    // pageSize: 10,
                    // name: this.keyword,
                    page: this.page,
                    perPage: 10
                }, (data) => {
                    this.memberList = data.data.data
                    this.current = data.data.pageNum
                    // this.perPage = parseFloat(data.data.pageSize)
                    this.pagetotal = data.data.total
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getMembers()
            },
            //选择用户
            onSure() {
                this.$ajax("put", "/api/roles/assignUser/"+ this.form.id, {
                    users: this.chooseGroup2,
                    // id: this.form.id
                }, data => {
                    this.show = false
                    this.chooseGroup2 = []
                    this.$parent.$parent.$parent.getDetail(this.form.id)
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            //用户列表中选择用户
            handleSelectionChange2(val) {
                this.chooseGroup2 = []
                val.forEach(el => {
                    this.chooseGroup2.push(el.id)
                })
            },
            //账号配置中管理用户
            handleSelectionChange(val) {
                this.chooseGroup3 = []
                val.forEach(el => {
                    this.chooseGroup3.push(el.id)
                })
            },
            findData(a) {
                return a == 1
            },

            Eventclick(val) {
                if (val == "删除") {
                    this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            this.$ajax(
                                "delete", "/api/roles/deleteUser/"+ this.form.id, {
                                users: this.chooseGroup3
                            },
                                data => {
                                    this.$refs.tables.clearSelection();
                                    this.chooseGroup3 = []
                                    this.$parent.$parent.$parent.getDetail(this.form.id)
                                    this.$message({
                                        type: "success",
                                        message: data.msg
                                    });
                                }
                            );
                        })
                        .catch(() => {
                            this.$message({
                                type: "success",
                                message: "已取消删除"
                            })
                        })
                }
            },
            addData() {
                this.getMembers()
                this.header = "添加"
                this.show = true
            },
            cancel() {
                this.show = false
            },
            onSubmit() {
                this.$ajax("put", "/api/roles/assignPermission/"+ this.form.id, {
                    permissions: this.checkedArr
                    // id: this.form.id
                }, data => {
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            handleCheckChange(data, checked, i) {
                this.checkedArr = this.$refs.tree.getCheckedKeys()
            },
            clearData() {
                this.form = {
                    id: '',
                    name: '',
                    display_name: ''
                }
                this.checkedArr = []
            }
        }
    }
</script>
<style scoped>
    #mileage {
        width: 700px;
        height: 500px;
    }

    .statusInfo {
        margin: 0 10px 10px 10px;
        background-color: rgba(193, 217, 230, 0.2);
        border-left: 4px solid #67b3d7;
        padding: 5px 0;
        font-size: 14px;
    }

    .titleLi {
        width: 15%;
        display: inline-block;
        text-align: right;
        padding: 0 4px;
        color: #606266;
    }

    .valueLi {
        width: 18%;
        display: inline-block;
        text-align: left;
        padding: 0 4px;
        color: #606266;
    }

    .roleBox {
        border: 1px solid #eee;
        margin-top: 20px;
    }

    .roleTitle {
        padding: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
    }
</style>